<template>
<view>
	<auto-round startColor="#b5a80c">
		<own-card-title icon="icon-zhekoukaguanli" :title="'折扣卡配置('+cardList.length+')'" subTitle="可设置不同等级的折扣卡,当顾客消费时可根据该折扣卡打折消费"/>
	</auto-round>
	<own-card-list>
		<auto-empty v-if="cardList.length<=0"/>
		<own-card-detail v-for="card in cardList" :name="card.name" :status="card.status" :objId="card.id"
			@onUpdateStatus="onUpdateStatus" @onEdit="onEdit" :key="card.id">
			<view class="label-group">
				<span class="label">售价：</span><span class="value">{{card.price}} 元</span>
			</view>
			<view class="label-group">
				<span class="label">折扣率：</span><span class="value">{{card.discountPercent}}%</span>
			</view>
			<view class="label-group">
				<span class="label">有效天数：</span><span class="value">{{card.validDays}}天</span>
			</view>
			<view class="label-group">
				<span class="label">备注：</span><span class="value">{{card.remark?card.remark:"-"}}</span>
			</view>
			<view class="label-group">
				<span class="label">创建时间：</span><span class="value">{{card.createTime}}</span>
			</view>
			<view class="label-group" v-if="card.updateTime">
				<span class="label">更新时间：</span><span class="value">{{card.updateTime}}</span>
			</view>
		</own-card-detail>
	</own-card-list>
	<own-card-fun @onAdd="onAdd"/>
	<auto-modal :show="addVisible" :title="title" @onOpt="onAddOpt" @onClose="onAddOpt('cancel')">
		<view class="form-group">
			<view class="form-label">名称<view class="form-remark iconfont icon-xuzhi4" @click="showMsg('如：钻石VIP6折卡')"></view></view>
			<input class="form-control" v-model="form.name" placeholder="请输入名称"/>
		</view>
		<view class="form-group">
			<view class="form-label">价格<view class="form-remark iconfont icon-xuzhi4" @click="showMsg('此价格用于计算员工的销量和营业额')"></view></view>
			<input class="form-control" type="digit" v-model="form.price" placeholder="请输入价格"/>
		</view>
		<view class="form-group">
			<view class="form-label">有效天数<view class="form-remark iconfont icon-xuzhi4" @click="showMsg('有效天数是指顾客办理该卡后的有效天数，0表示永久有效')"></view></view>
			<input class="form-control" type="number" v-model="form.validDays" placeholder="请输入正整数"/>
			<view class="form-extend">天</view>
		</view>
		<view class="form-group">
			<view class="form-label">折扣率<view class="form-remark iconfont icon-xuzhi4" @click="showMsg('折扣率是指顾客消费时的折扣，输入80表示打8折')"></view></view>
			<input class="form-control" type="number" v-model="form.discountPercent" placeholder="请输入正整数"/>
			<view class="form-extend">%</view>
		</view>
		<view class="form-group">
			<view class="form-label">备注</view>
			<input class="form-control" v-model="form.remark" placeholder="选填"/>
		</view>
	</auto-modal>
	
	<auto-modal :show="showVisiable" title="字段说明" @onOpt="showVisiable = false" @onClose="showVisiable = false" :cancel="false">
		<view class="msg-content">{{msgContent}}</view>
	</auto-modal>
</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			addVisible: false,
			showVisiable: false,
			msgContent: '',
			title: "添加一个折扣卡配置",
			form: {},
			cardList: [],
		}
	},
	onLoad() {
		that = this;
		this.loadData();
	},
	methods: {
		loadData: function() {
			this.$request.get("/card/listPercentCard", {}).then((res) => {
				that.cardList = res.data;
			})
		},
		onAdd: function() {
			this.addVisible = true;
			this.title = "添加一个折扣卡配置";
		},
		onAddOpt: function(flag) {
			if(flag==='ok') {
				console.log(this.form)
				let data = this.form;
				data.validDays = Number(data.validDays);
				data.discountPercent = Number(data.discountPercent);
				data.price = Number(data.price);
				if(!data.name || data.length<2) {
					this.$common.showNormalToast("名称长度不能低于2")
				} else if(isNaN(data.price) || data.price<0) {
					this.$common.showNormalToast("价格不能小于0")
				} else if(isNaN(data.validDays) || data.validDays<0) {
					this.$common.showNormalToast("有效天数不能小于0");
				} else if(isNaN(data.discountPercent) || data.discountPercent<1 || data.discountPercent>99) {
					this.$common.showNormalToast("请输入1~99的折扣率");
				} else {
					this.$request.get("/card/savePercentCard", data, {method: "post"}).then((res) => {
						if(res.flag) {
							if(data.id && data.id>0) { //修改
								that.cardList[that.cardList.findIndex((item)=>item.id === data.id)] = res.data;
							} else {
								that.cardList.splice(0, 0, res.data);
							}
							this.addVisible = false;
						} else {
							that.$common.showNormalToast(res.msg);
						}
					})
				}
			} else {
				this.addVisible = false;
			}
		},
		showMsg: function(msg) {
			this.showVisiable = true;
			this.msgContent = msg;
		},
		onUpdateStatus: function(objId, status) {
			const index = this.cardList.findIndex((item)=>item.id===objId);
			let tarObj = this.cardList[index];
			this.$request.get("/card/updateStatus", {id: objId, status: status, type: 'percent'}, {method: "post"}).then((res) => {
				tarObj.status = status;
				that.cardList.splice(index, 1, tarObj);
				that.$common.showNormalToast(res.msg);
			})
		},
		onEdit: function(objId) {
			const tarObj = this.cardList.find((item) => item.id === objId);
			this.addVisible = true;
			this.title = "修改配置["+tarObj.name+"]";
			this.form = tarObj;
		}
	}
}
</script>

<style lang="scss">
.msg-content {
	color:#666; padding: 24rpx 0px;
}
</style>
